                
<template>
  <div class="user-edit">
    <Drawer :title="title" v-model="visible" width="1024" :mask-closable="false">
      <Scroll :height="height">
      <div style="width: 90%;margin: 10px auto;">
        <div style="background-color: rgba(139,139,139,0.6); font-size: 14px;font-family: '宋体';">
          <div style="width: 90%;background-color: #ffffff;margin: 0 auto;">
            <div class="paperStyle" id="page_content">
              <div style="margin: 20px 15px;line-height: 24px;font-family: 'fangsong';font-size:14px;color: #000;">
                <Row class="text-content">
                  <div style="height: 20px;"></div>
                  <div style="text-align: center;font-family: '微软雅黑'; "><h3>配电第一种工作票</h3>
                    <span style="display: none">{{ data.id }}</span>
                  </div>
                  <div style="height: 15px;"></div>
                  <div class="sectionStyle ticketFont">
                    <Row>
                      <Col span="16">
                        <span class="ticketFont">单位：<span><u>{{ data.ticket_unit }}</u></span>
                        </span>
                      </Col>
                      <Col span="8">
                        <span class="ticketFont">编号：<span><u>{{ data.ticket_code }}</u></span>
                        </span>
                      </Col>
                    </Row>
                    <Row>
                      <Col span="16">
                        <span class="ticketFont">1. 工作负责人：<span><u>{{ data.work_leader }}</u></span>
                        </span>
                      </Col>
                      <Col span="8">
                        <span class="ticketFont">班组：<span><u>{{ data.ticket_team }}</u></span>
                        </span>
                      </Col>
                    </Row>
                    <Row>
                      <Col span="24">
                        <div class="sectionStyle ticketFont">
                          <span class="ticketFont">2. 工作班成员（不包括工作负责人）:　
                            <span><u>　{{ data.team_member }}　</u>共<u>　{{ data.team_member_num }}　</u>人。</span>
                          </span>
                        </div>
                      </Col>
                    </Row>
                    <Row>
                      <!--3. 工作任务-->
                      <div class="sectionStyle ticketFont">
                        <div>3. 工作任务</div>
                      </div>
                      <div class="sectionStyle ticketFont">
                        <table class="gridtable">
                          <tr>
                            <td style="width: 30%;text-align: center">
                                工作地点或设备[注明变（配）电站、线路名称、设备双重名称及起止杆号]
                            </td>
                            <td style="width: 45%;text-align: center">工作内容</td>
                          </tr>
                          <tr v-for="(item,index) in data.workTask" :key="index">
                            <td>{{ item.work_position }}</td>
                            <td>{{ item.work_content }}</td>
                          </tr>  
                          <tr v-for="count in 4-data.workTask.length" :key="count">
                            <td style="height: 32px;"></td><td></td>
                          </tr>  
                        </table>
                      </div>
                    </Row>
                    <Row>
                      <!--4. 计划工作时间-->
                      <div class="sectionStyle ticketFont">
                        <div>4. 计划工作时间： 自<u> {{ data.start_work_time | toChineseTime }} </u>
                          至<u> {{ data.end_work_time | toChineseTime }} </u>
                        </div>
                      </div>
                    </Row>
                    <Row>
                      <div class="sectionStyle ticketFont">
                        5.安全措施[应改为检修状态的线路、设备名称，应断开的断路器（开关）、隔离开关（刀闸）、熔断器，应合上的接地刀闸，应装设的接地线、绝缘隔板、遮拦（围栏）和标示牌等，装设的接地线应明确具体位置，必要时可附页绘图说明]
                      </div>
                      <div class="sectionStyle ticketFont">
                        <table class="gridtable">
                          <tr>
                            <td style="width: 90%;">
                                5.1 调控或运维人员[变（配）电站、发电厂]应采取的安全措施
                            </td>
                            <td style="width: 10%;text-align: center">
                                已执行
                            </td>
                          </tr>
                          <tr v-for="(item,index) in safetyMeasuresOne" :key="index" style="height: 26px;">
                              <td>{{ item.measures_content }}</td>
                              <td style="text-align: center"></td>
                          </tr>
                          <tr v-for="count in 5-safetyMeasuresOne.length" :key="count">
                            <td style="height: 32px;"></td><td></td>
                          </tr> 
                        </table>
                      </div>
                      <div style="height: 12px;"></div>
                      <!--5.2 安全措施表格-->
                      <div class="sectionStyle ticketFont">
                        <div>
                          <table class="gridtable">
                            <tr>
                              <td style="width: 90%;">5.2 工作班完成的安全措施</td>
                              <td style="width: 10%;text-align: center">已执行</td>
                            </tr>
                            <tr v-for="(item,index) in safetyMeasuresTwo" :key="index" style="height: 26px;">
                                <td>{{ item.measures_content }}</td>
                                <td style="text-align: center"></td>
                            </tr>
                            <tr v-for="count in 5-safetyMeasuresTwo.length" :key="count">
                              <td style="height: 32px;"></td><td></td>
                            </tr> 
                          </table>
                        </div>
                      </div>
                      <div style="height: 12px;"></div>
                      <!--5.3 安全措施表格-->
                      <div class="sectionStyle ticketFont">
                        <table class="gridtable">
                          <tr>
                            <td colspan="4">5.3 工作班装设（或拆除）的接地线</td>
                          </tr>
                          <tr>
                            <td style="text-align: center">线路名称或设备双重名称和装设位置</td>
                            <td style="text-align: center">接地线编号</td>
                            <td style="text-align: center">装设时间</td>
                            <td style="text-align: center">拆除时间</td>
                          </tr>
                          <tr v-for="(item,index) in data.safetyMeasuresThree" :key="index" style="height: 26px;">
                            <td>{{ item.equipment_position }}</td>
                            <td style="text-align: center">{{ item.grounding_num }}</td>
                            <td style="text-align: center">{{ item.furnish_time | toChineseTime }}</td>
                            <td style="text-align: center">{{ item.demolition_time | toChineseTime }}</td>
                          </tr>
                          <tr v-for="count in 3-data.safetyMeasuresThree.length" :key="count">
                            <td style="height: 32px;"></td><td></td><td></td><td></td>
                          </tr>
                        </table>
                      </div>
                      <div style="height: 12px;"></div>
                      <div class="sectionStyle ticketFont">
                        <table class="gridtable">
                          <tr>
                            <td style="width: 90%;">5.4 配合停电线路应采取的安全措施</td>
                            <td style="width: 10%;text-align: center">已执行</td>
                          </tr>
                          <tr v-for="(item,index) in safetyMeasuresFour" :key="index" style="height: 26px;">
                            <td>{{ item.measures_content }}</td>
                            <td style="text-align: center"></td>
                          </tr>
                          <tr v-for="count in 2-safetyMeasuresFour.length" :key="count">
                            <td style="height: 32px;"></td><td></td>
                          </tr>
                        </table>
                      </div>
                    </Row>
                    <Row>
                      <div class="sectionStyle ticketFont">
                        <div>5.5 保留或邻近的带电线路、设备</div>
                        <div><u>　{{ data.near_equipment }}　</u></div>
                      </div>
                    </Row>
                    <Row>
                      <div class="sectionStyle ticketFont">
                        <div>5.6 其他安全措施和注意事项</div>
                        <div><u>　{{ data.announcements }}　</u></div>
                      </div>
                    </Row>
                    <Row>
                      <!--工作票签发人签名　-->
                      <div class="sectionStyle ticketFont">
                        <Col span="18">
                          <span>工作票签发人签名：<u>　　{{ nullString }}　　</u>、<u>　　{{ nullString }}　　</u></span>
                        </Col>
                        <Col span="6">
                          <span>{{nullTime | toChineseTime }}</span>
                        </Col>
                      </div>
                    </Row>
                    <Row>
                      <!--工作负责人签名　-->
                      <div class="sectionStyle ticketFont">
                        <Col span="18">
                          <span>工作负责人签名：<u>　　{{ nullString }}　　</u></span>
                        </Col>
                        <Col span="6">
                          <span>{{nullTime | toChineseTime }}</span>
                        </Col>
                      </div>
                    </Row>
                    <Row>
                      <div class="sectionStyle ticketFont">
                        <div>5.7 其他安全措施和注意事项补充（由工作负责人或工作许可人填写）</div>
                        <div><u>　{{ data.other_announcements }}　</u></div>
                      </div>
                    </Row>
                    <Row>
                      <div style="height: 12px;"></div>
                      <div class="sectionStyle ticketFont">
                        <div>6. 工作许可</div>
                        <table class="gridtable">
                          <tr>
                            <td style="text-align: center">许可的线路或设备</td>
                            <td style="text-align: center">许可方式</td>
                            <td style="text-align: center">工作许可人</td>
                            <td style="text-align: center">工作负责人签名</td>
                            <td style="text-align: center">许可工作的时间</td>
                          </tr>
                          <tr v-for="(item, index) in data.workAllow" :key="index" style="height: 26px;">
                              <td>{{ item.allow_equipment }}</td>
                              <td style="text-align: center">{{ item.allow_way }}</td>
                              <td style="text-align: center">{{ item.work_licensor }}</td>
                              <td style="text-align: center"></td>
                              <td style="text-align: center">{{ nullTime | toChineseTime }}</td>
                          </tr>
                          <tr v-for="count in 4-data.workAllow.length" :key="count">
                            <td style="height: 32px;"></td><td></td><td></td><td></td><td></td>
                          </tr>
                        </table>
                      </div>
                    </Row>
                    <Row>
                      <div class="sectionStyle ticketFont">
                        <div>7. 工作任务单登记</div>
                        <table class="gridtable">
                          <tr>
                            <td style="text-align: center">工作任务单编号</td>
                            <td style="text-align: center;width: 250px;">工作任务</td>
                            <td style="text-align: center">小组负责人</td>
                            <td style="text-align: center">工作许可时间</td>
                            <td style="text-align: center">工作结束报告时间</td>
                          </tr>
                          <tr v-for="(item, index) in data.workTaskSheets" :key="index" style="height: 26px;">
                            <td style="text-align: center">{{ item.dispatch_code }}</td>
                            <td>{{ item.dispatch_mission }}</td>
                            <td style="text-align: center">{{ item.dispatch_leader }}</td>
                            <td style="text-align: center">{{ item.dispatch_start_time}}</td>
                            <td style="text-align: center">{{ item.dispatch_end_time}}</td>
                          </tr>
                          <tr v-for="count in 2-data.workTaskSheets.length" :key="count">
                            <td style="height: 32px;"></td><td></td><td></td><td></td><td></td>
                          </tr>
                        </table>
                      </div>
                    </Row>
                    <Row>
                      <div class="sectionStyle ticketFont">
                        <div>8. 现场交底，工作班成员确认工作负责人布置的工作任务、人员分工、安全措施和注意事项并签名：</div>
                        <div style="height: 60px;"></div>
                      </div>
                    </Row>
                    <Row>
                      <div class="sectionStyle ticketFont">
                        <div>9. 人员变更</div>
                        <div>9.1 工作负责人变动情况：原工作负责人 <u>　　{{ nullString }}　　</u>离去，
                          变更 <u>　　{{ nullString }}　　</u> 为工作负责人。
                        </div>
                        <div>
                          <Col span="12">
                            <span>工作票签发人：<u>　　{{ nullString }}　　</u></span>
                          </Col>
                          <Col span="12">
                            <span><u>{{nullTime | toChineseTime }}</u></span>
                          </Col>
                        </div>
                        <div>
                          <Col span="12">
                            <span>原工作负责人签名确认：<u>　　{{ nullString }}　　</u></span>
                          </Col>
                          <Col span="12">
                            <span>新工作负责人签名确认：<u>　　{{ nullString }}　　</u></span>
                          </Col>
                        </div>
                        <div>
                          <Col span="12">
                            {{ nullString }}
                          </Col>
                          <Col span="12">
                            <span><u>{{nullTime | toChineseTime }}</u></span>
                          </Col>
                        </div>
                      </div>
                      <div class="sectionStyle ticketFont">
                        <div>9.2 工作人员变动情况</div>
                        <table class="gridtable">
                          <tr>
                            <td rowspan="2" style="width: 80px;text-align: center">新增人员</td>
                            <td style="width: 80px;text-align: center">姓名</td>
                            <td>
                              <span>{{ data.team_member_add }}</span>
                            </td>
                          </tr>
                          <tr>
                            <td style="text-align: center">变更时间</td>
                            <td>
                              <span>{{ data.team_member_add_time | toChineseTime }}</span>
                            </td>
                          </tr>
                          <tr>
                            <td rowspan="2" style="text-align: center">离开人员</td>
                            <td style="text-align: center">姓名</td>
                            <td><span>{{ data.team_member_leave }}</span></td>
                          </tr>
                          <tr>
                            <td style="text-align: center">变更时间</td>
                            <td>{{ data.team_member_leave_time | toChineseTime }}</td>
                          </tr>
                        </table>
                        <div style="margin-left: 300px;">工作负责人签名：<u>　　{{ nullString }}　　</u></div>
                      </div>
                    </Row>
                    <Row>
                      <div class="sectionStyle ticketFont">
                        <div>10. 工作票延期：有效期延长到<span><u>{{ nullTime | toChineseTime }}</u></span></div>
                        <Row>
                          <Col span="12">工作负责人签名:<u>　　{{ nullString }}　　</u></Col>
                          <Col span="12"><u>　　{{ nullTime | toChineseTime }}　　</u></Col>
                        </Row>
                        <Row>
                          <Col span="12">工作许可人签名:<u>　　{{ nullString }}　　</u></Col>
                          <Col span="12"><u>　　{{ nullTime | toChineseTime }}　　</u></Col>
                        </Row>
                      </div>
                    </Row>
                    <Row>
                      <div class="sectionStyle ticketFont">
                        <div>11. 每日开工和收工记录（使用一天的工作票不必填写）</div>
                        <table class="gridtable">
                          <tr style="text-align: center">
                            <td>收工时间</td>
                            <td>工作负责人</td>
                            <td>工作许可人</td>
                            <td>开工时间</td>
                            <td>工作许可人</td>
                            <td>工作负责人</td>
                          </tr>
                          <tr style="height: 26px;" v-for="(item, index) in data.workLogin" :key="index">
                              <td>{{ item.work_end_time }}</td>
                              <td>{{ item.work_leader }}</td>
                              <td>{{ item.work_licensor }}</td>
                              <td>{{ item.work_start_time }}</td>
                              <td>{{ item.work_licensor }}</td>
                              <td>{{ item.work_leader }}</td>
                          </tr>
                          <tr v-for="count in 3-data.workLogin.length" :key="count">
                            <td style="height: 32px;"></td><td></td><td></td><td></td><td></td><td></td>
                          </tr>
                      </table>
                      </div>
                    </Row>
                    <Row>
                      <div class="sectionStyle ticketFont">
                        <div>12. 工作终结</div>
                        <div>12.1 工作班现场所装设接地线共<u>{{ nullString }}</u>组，个人保安线共<u>{{ nullString }}</u>
                          组已全部拆除，工作班人员已全部撤离现场，材料工具已清理完毕，杆塔、设备上已无遗留物。
                        </div>
                      </div>
                    </Row>
                    <Row>
                      <div class="sectionStyle ticketFont">
                        <div>12.2 工作终结报告</div>
                        <table class="gridtable">
                          <tr style="text-align: center;">
                            <td>终结的线路或设备</td>
                            <td>报告方式</td>
                            <td>工作负责人</td>
                            <td>工作许可人</td>
                            <td>终结报告时间</td>
                          </tr>
                          <tr style="height: 26px;" v-for="(item, index) in data.workOverReport" :key="index">
                            <td>{{ item.equipment }}</td>
                            <td>{{ item.report_type }}</td>
                            <td>{{ item.work_leader }}</td>
                            <td>{{ item.work_licensor }}</td>
                            <td>{{ item.report_time | toChineseTime }}</td>
                          </tr>
                          <tr v-for="count in 4-data.workOverReport.length" :key="count">
                            <td style="height: 32px;"></td><td></td><td></td><td></td><td></td>
                          </tr>
                        </table>
                      </div>
                    </Row>
                    <Row>
                      <div class="sectionStyle ticketFont">
                        <div>13. 备注</div>
                        <div>13.1 指定专责监护人<u>　{{ data.guardian }}　</u>负责监护<u>　{{ data.guardian_content }}　</u>（地点及具体工作）</div>
                        <div>13.2 其他事项<u>{{ data.other_matters }}</u></div>
                      </div>
                    </Row>
                  </div>
                </Row>
              </div>
            </div>
          </div>
        </div>
      </div>
      </Scroll>
      <div class="demo-drawer-footer">
        <Button @click="handleCancel" style="margin-right: 36px;">确定</Button>
        <Button type="error" @click="handleApproval" icon="md-bonfire" style="margin-right: 36px;" :loading="submitLoading">审批</Button>
        <Button type="primary" @click="print" icon="ios-print-outline">打印</Button>
      </div>
    </Drawer>
  </div>
</template>
<script>
import { getStore } from '@/libs/storage';
import { dateToString } from '@/libs/function.js';
import { updateVehicle } from '@/api/work';
import moment from 'moment';
export default {
  name: 'view-vehicle',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object
    },
  },
  data() {
    return {
      visible: this.value,
      title: "查看配网第一种工作票",
      height: 540,
      submitLoading: false,
      company: '',
      real_name: '',
      safetyMeasuresOne: [],
      safetyMeasuresTwo: [],
      safetyMeasuresFour: [],
      nullTime: '',
      nullString: '　　　　　　　',
    }
  },
  filters: {
    toChineseTime(time) {
      if (time) {
        return moment(time).format('YYYY年MM月DD日HH时mm分');
      } else {
        return '　　年　月　日　时　分';
      }
    }
  },
  methods: {
    init() {
      const userInfo = JSON.parse(getStore('userInfo'));
      this.company = userInfo.compamy;
      this.real_name = userInfo.real_name;
    },
    handleCancel() {
      this.visible = false;
    },
    setCurrentValue(value) {
      this.visible = value;
    },
    print() {

    },
    handleApproval() {
      // if (this.data.state === 1) {
      //   this.$Message.error('此派车单已经审批过了，无需再次审批！');
      // } else {
      //   let params = {
      //     id: this.data.id,
      //     approve: this.real_name,
      //     approve_time: dateToString(new Date()),
      //     state: 1
      //   };
      //   this.submitLoading = true;
      //   updateVehicle(params).then(res => {
      //     this.submitLoading = false;
      //     if (res.code === 0) {
      //       this.data.approve = this.real_name;
      //       this.data.state = 1;
      //       this.$Message.success('审批成功！')
      //     }
      //   })
      // }
    },
  },
  watch: {
    value(val) {
      this.setCurrentValue(val);
      this.safetyMeasuresOne = this.data.safetyMeasures.filter(item => item.type === 1);
      this.safetyMeasuresTwo = this.data.safetyMeasures.filter(item => item.type === 2);
      this.safetyMeasuresFour = this.data.safetyMeasures.filter(item => item.type === 3);
    },
    visible(value) {
      this.init();
      this.$emit("input", value);
      
    }
  },
  computed: {
    
  },
  mounted() {
    this.init();
    this.height = Number(document.documentElement.clientHeight - 100);
  }
}
</script>
<style lang="less" scoped>
.demo-drawer-footer{
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
.gridtable {
  font-family: verdana, arial, sans-serif;
  font-size: 12px;
  color: #000000;
  border-width: 1px;
  border-color: #777777;
  border-collapse: collapse;
  width: 100%;
}

.gridtable th {
  border-width: 1px;
  padding: 6px;
  border-style: solid;
  border-color: #aaaaaa;
  background-color: #dedede;
}

.gridtable td {
  border-width: 1px;
  padding: 4px 4px;
  border-style: solid;
  border-color: #8b8b8b;
  background-color: #ffffff;
}
.text-content{
  margin: 46px 46px;
}
.text-content p{
  text-indent: 36px;
  font-size: 18px;
}
.paperStyle {
  border: solid 1px #bdbdbd;
  margin: 24px auto;
}
.ticketFont {
  font-family: '微软雅黑';
  font-size: 12px;
}
.sectionStyle {
  margin: 4px;
}
</style>